<template>
  <view style="paddingBottom:10rpx;boxSizing:border-box">
    <!-- 可用账户列表 -->
    <view :style="{width: '100%', height: pageHeight+'px', overflow: 'auto',}">
      <view
        class="account_center"
        v-for="(item, index) in props.friendInfor"
        :key="index"
        @click="index == 0 ? '' : Route(item.id)"
      >
        <view class="account_left">
          <view class="account_left_1"><image :src="item.driver_avatar"></image></view>
          <view style="margin-left: 20rpx">
            <view class="account_left_2">
              <text>{{ item.driver_name }}</text>
              <text v-if="item.is_moren == '1'">默认</text>
            </view>
            <text>{{ item.driver_mobile }}</text>
          </view>
        </view>
        <uni-icons type="forward" color="#666" size="22" v-if="index !== 0"></uni-icons>
        <!-- 图标我 -->
        <view class="account_me" v-if="index == '0'">本人</view>
      </view>
      <view
        style="
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          height: 36vh;
          justify-content: center;
        "
        v-if="friendInfor.length < 1"
      >
        <image
          :src="NoStatus"
          style="width: 42%; height: 100px"
        ></image>
        <text style="margin-top: 40rpx; color: #666">暂无可用账户</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { NoStatus } from '@/utils/Static';
const props = defineProps({
  friendInfor: {
    type: Array,
  },
  pageHeight:{
	  type:String
  }
});
function Route(id: number) {
  uni.navigateTo({
    url: '/pages/authorized/accountsDetail?id=' + id,
  });
}
</script>

<style scoped lang="less">
@import url('../authorized/less/accountList.less');
</style>
